<!DOCTYPE html>
<html>
<head>
  <title>Vue Calculator</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>

<div id="app">
  <input type="text" v-model="inputValue" />
  <br>
  <button @click="zhi(1)">1</button>
  <button @click="zhi(2)">2</button>
  <button @click="zhi(3)">3</button>
  <button @click="fu('+')">+</button>
  <br>
  <button @click="zhi(4)">4</button>
  <button @click="zhi(5)">5</button>
  <button @click="zhi(6)">6</button>
  <button @click="fu('-')">-</button>
  <br>
  <button @click="zhi(7)">7</button>
  <button @click="zhi(8)">8</button>
  <button @click="zhi(9)">9</button>
  <button @click="fu('*')">*</button>
  <br>
  <button @click="clear">C</button>
  <button @click="zhi(0)">0</button>
  <button @click="jieguo()">=</button>
  <button @click="fu('/')">/</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    inputValue: '',
    storedValue: null,
    operator: null
  },
  methods: {
    zhi(number) {
      this.inputValue += number;
    },
    fu(op) {
      if (this.operator) {
        this.calculate();
      }
      this.storedValue = parseFloat(this.inputValue);
      this.operator = op;
      this.inputValue = '';
    },
    clear() {
      this.inputValue = '';
      this.storedValue = null;
      this.operator = null;
    },
    jieguo() {
      const currentValue = parseFloat(this.inputValue);
      let result;
      switch (this.operator) {
        case '+':
          result = this.storedValue + currentValue;
          break;
        case '-':
          result = this.storedValue - currentValue;
          break;
        case '*':
          result = this.storedValue * currentValue;
          break;
        case '/':
          result = this.storedValue / currentValue;
          break;
        default:
          return;
      }
      this.inputValue = result.toString();
      this.storedValue = null;
      this.operator = null;
    }
  }
});
</script>

</body>
</html>